<template>
  <div class="banner-card">
    <div style="height: 0.5rem;">
      <p class="title">
        {{title}}
      </p>
    </div>
    <div style="width:2.4rem;display: flex;margin: auto;">
      <div style="flex: 1;text-align: center;height: 1.04rem;">
        <img style="width: 1rem;height: 0.8rem;" :src="img" >
      </div>
      <div style="flex: 1;text-align: center;height: 1.04rem;">
        <slot name="content">
          <p style="font-size: 0.35rem;color: #FFFFFF;font-weight: 700;margin: 0;">1-7天</p>
          <p style="font-size: 0.2rem;color: #FFFFFF;margin: 0;">VIP会员</p>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String
      },
      img: {
        type: String
      }
    }
  }
</script>

<style>
  .banner-card {
    position:relative;
    width:2.64rem;
    height: 1.54rem;
    margin: 10px auto;
    background-image: linear-gradient(to right bottom,#ff6b81,#ff6b6b);
    border-radius: 10px;
  }
  .banner-card .title {
    font-size:0.14rem;
    width:fit-content;
    margin:auto;
    padding:4px 14px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    background-image: linear-gradient(to right, #ff9f43,#feca57);
    text-align: center;
    color: #FFFFFF;
  }
</style>
